<div class="ibox-title">
    <h3>{{selectedItem.title}} |
        <small>{{selectedItem.description}}</small>
        <div ibox-tools></div>
    </h3>
</div>

<div class="ibox-content" ng-hide="isPollDisabled()">
    <div class="form-group"><label>Just For: </label>

        <div class="radio"><label> <input type="radio" value="friends" id="friendsRadio"
                                          ng-checked="true"
                                          name="privacyRadios"
                                          ng-model="selectedItem.pollPrivacy">Friends</label>
        </div>
        <div class=" radio"><label> <input type="radio" value="public" id="publicRadio"
                                           name="privacyRadios"
                                           ng-model="selectedItem.pollPrivacy">Public</label>
        </div>
        <select class="form-control MultiSelect" data-placeholder="Roles"
                ng-model="selectedItem.pollRoles"
                ng-options="roles for roles in pollRoles" multiple="multiple" multiselect-dropdown>
        </select>
    </div>
</div>

<div class="ibox-content">
    <div class="form-group"><label>End Date</label>

        <div class='input-group date'><input type='datetime' class='form-control' date-time
                                             ng-model='selectedItem.endDate' view='date'
                                             ng-disabled="isPollDisabled()"
                                             required=""><span
                class='input-group-addon'><i class='fa fa-calendar'></i></span></div>
    </div>
</div>

<div class="ibox-content">

    <div class="form-group"><label>Options</label>

        <div class="form-group">
            <div class="panel pre-scrollable"
                 ng-hide="isPollObjectEmpty(selectedItem.pollOptions)">
                <div class="panel-body">
                    <ul class="list-group"
                        ng-repeat="(key,option) in selectedItem.pollOptions">
                        <li class="list-group-item">
                            <form name='vote'>

                                <a class="btn btn-xs btn-white pull-right"
                                   ng-click="votePoll(key)"
                                   ng-hide="isCurrentUserVoted()"><i
                                        class="fa fa-thumbs-up"></i>Vote</a>

                                <a class="btn btn-xs btn-white pull-right"
                                   ng-class=" {disabled: isCurrentUserVoted()}"
                                   ng-show="isCurrentUserVoted()"><i
                                        class="fa fa-thumbs-up"></i>{{ option.optionVoteCount }}</a>
                            </form>
                            <b>{{ option.optionName }}</b> | {{ option.optionDetail }}
                        </li>
                    </ul>
                </div>
            </div>

            <div class="ibox-content" ng-hide="isPollDisabled()"><label>Add New Options</label>
                <div class="form-group">
                    <form name='addOption' ng-submit="addPollOption()">
                        <input type="text" ng-model="pollOptionTempList.optionName"
                               placeholder="Add an option for your poll"
                               class="form-control" required="">
                        <input type="text" ng-model="pollOptionTempList.optionDetail"
                               placeholder="Add a definiton for your option"
                               class="form-control">
                        <button type="submit" class="btn btn-primary">Add Option</button>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="ibox-content">
    <freebase-tags tag-context="selectedItem.pollTagContext" add-tag-callback="addPollTagForView"
                   is-create='isCreateObject'></freebase-tags>

</div>

<div class="ibox-content">
    <div class="form-group"><label>{{selectedItem.title}}'s fields</label></div>
    <script type="text/ng-template" id="content_renderer.html">
        <div ui-tree-handle class="tree-node tree-node-content">
            <a class="pull-right btn btn-white btn-xs" data-nodrag ng-click="showContent(fieldKey, contentKey)"><span
                    class="fa fa-eye"></span></a>
            {{node.owner}}'s content
        </div>
    </script>
    <script type="text/ng-template" id="field_renderer.html">
        <div ui-tree-handle class="tree-node tree-node-content">
            <a class="pull-right btn btn-white btn-xs" data-nodrag ng-click="addButtonClick(fieldKey)"><span
                    class="fa fa-plus"></span></a>
            <a class="btn btn-primary btn-xs" data-nodrag ng-click="toggle(this)"><span class="fa"
                                                                                        ng-class="{'fa-angle-down': collapsed, 'fa-angle-right': !collapsed}"></span></a>
            {{node.name}}(Type:{{node.type.name}})
        </div>
        <ol ui-tree-nodes="" ng-model="node.content" ng-class="{hidden: collapsed}">
            <li ng-repeat="(contentKey, node) in node.content" ui-tree-node ng-include="'content_renderer.html'">
            </li>
        </ol>
    </script>
    <div ui-tree id="tree-root">
        <ol ui-tree-nodes ng-model="selectedItem.fields">
            <li ng-repeat="(fieldKey,node) in selectedItem.fields" ui-tree-node ng-include="'field_renderer.html'"></li>
        </ol>
    </div>
</div>

<div class="ibox-content">
    <section ng-controller="PollTabCtrl">
        <tabset>
            <tab ng-click="selectTab(1)">
                <tab-heading>
                    Comments
                </tab-heading>

            </tab>

            <tab ng-click="selectTab(2)">
                <tab-heading>
                    Results
                </tab-heading>

            </tab>
        </tabset>

        <br>

            <div class='ibox-content' ng-show="isSelected(1)">

                <comment-template item-comment="selectedItem.pollComments"
                                  add-comment-callback="addPollCommentForView"></comment-template>

            </div>

            <div class='ibox-content' ng-show="isSelected(2)">

                <div ng-hide="isCurrentUserVoted()">

                    <p style="color: darkred">You can't see the vote result unless you vote!</p>

                </div>

                <div ng-show="isCurrentUserVoted()">
                    <canvas doughnutchart options="doughnutOptions" data="doughnutData" height="140"
                            responsive=true></canvas>
                </div>

            </div>

    </section>
</div>

